<template>
  <div class="content_box">
    <div class="box_top" style="position: relative">
      <div class="video_box">
        <video
          :id="`video_mulu`"
          :ref="`vueMiniPlayer`"
          class="video"
          style=""
          :src="videoUrl"
          controls="true"
          autoplay
          preload="auto"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          controlsList="nodownload"
          @canplay="getVidDur()"
        />
      </div>
      <div class="video_mulu">
        <div style="font-size: 18px; font-weight: bold">视频目录</div>
        <div
          style="
            background: #fafafd;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #fafafb;
            margin-top: 20px;
          "
        >
          <RecursiveCollapse
            :activeitem="config"
            :depth="1"
            @check-url="handleChangeUrl"
          />
        </div>
      </div>
    </div>
    <div class="box_bottom" style="position: relative; ">
      <div class="title">
        <div>评论{{ evaluateList.length }}</div>
        <div class="input_pj">
          <div>
            <el-input
              v-model="inputValue"
              placeholder="请输入评论"
              resize="none"
              style="width: 700px"
            />
          </div>
          <div>
            <el-button
              type="warning"
              @click="handleCourseAdd"
            >发布评论</el-button>
          </div>
        </div>
      </div>
      <div style="height: 500px; overflow-y: auto">
        <div v-for="item in evaluateList" :key="item.name" class="pl_box">
          <div style="border-radius: 10px;">
            <img
              :src="item.headImgUrl"
              alt=""
              style="width: 50px; height: 50px; border-radius: 100px;margin-right: 30px;"
            >
          </div>
          <div>
            <div style="font-weight: 400; font-size: 16px;margin-bottom:10px">
              {{ item.realName }}
            </div>
            <div style="font-weight: 400; font-size: 14px; color: #4d4d4d;margin-bottom:10px">
              {{ item.courseContent }}
            </div>
            <div class="pl_bottom">
              <div
                class="time"
                style="font-weight: 400; font-size: 14px; color: #999999;margin-right:20px"
              >
                {{ item.createDate }}
              </div>
              <div class="icon">
                <img
                  v-if="!item.isLiked"
                  style="width: 18px; height: 18px; margin-right: 10px"
                  src="https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363306588.png"
                  alt=""
                  @click="handleChecked(item)"
                >
                <!-- 已点赞 -->
                <img
                  v-else
                  style="width: 18px; height: 18px; margin-right: 10px"
                  src="https://jzchildcare.oss-cn-hangzhou.aliyuncs.com/teach/file/common/2025-02-24/fee83df18a544278a6c868a1024351f5_1740363293722.png"
                  alt=""
                  @click="handleChecked(item)"
                >
                <span>{{ item.likedCount }}</span>
                <!-- <i
              v-if="item.checked"
              class="el-icon-success"
              @click="handleChecked(item)"
            />
            <i
              v-else
              class="el-icon-circle-check"
              @click="handleChecked(item)"
            /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCourseChildList,
  courseDetail,
  estimateCourseList,
  courseAdd,
  courseLike
} from './api'
import RecursiveCollapse from './components/RecursiveCollapse.vue'
export default {
  components: {
    RecursiveCollapse
  },
  data () {
    return {
      inputValue: '',
      config: [],
      videoUrl: '',
      evaluateList: [],
      ids: ''
    }
  },
  created () {
    this.ids = this.$route.query.id
    this.handleCourseChildDetail()
    this.handleCourseDetaill()
    this.handleCourseList()
  },
  methods: {
    async handleCourseAdd () {
      if (!this.inputValue) {
        this.$message.warning('请输入评论')
        return false
      }
      await courseAdd({
        courseId: this.ids,
        courseContent: this.inputValue
      })
      this.$message.success('发布成功')
      this.inputValue = ''
      this.handleCourseList()
    },
    async handleCourseList () {
      const res = await estimateCourseList({
        courseId: this.ids,
        pageNum: 0,
        pageSize: 100
      })
      this.evaluateList = res.content
      console.log(res, 'handleCourseList')
    },

    async handleCourseChildDetail () {
      const res = await getCourseChildList({
        courseId: this.ids
      })
      this.config = res
    },
    async handleCourseDetaill () {
      const res = await courseDetail(this.ids)
      console.log(res, 'handleCourseDetaill')
    },
    handleChecked (item) {
      item.isLiked = !item.isLiked
      this.handleCourseLike(item)
    },
    async handleCourseLike (item) {
      await courseLike({
        courseId: this.ids,
        id: item.id,
        isLiked: item.isLiked
      })
      this.handleCourseList()
    },
    handleChangeUrl (url) {
      this.videoUrl = url
      console.log(url, 'handleChangeUrl')
    },
    getVidDur (e) {
      var elevideo = document.getElementById(`video_mulu`)
      // elevideo.addEventListener("seeked", function () {
      //   console.log("禁止拖拽进度条");
      //   // 设置视频的当前时间为视频的总时间，这样进度条会停留在最后一帧

      //   return false;
      // });
      elevideo.addEventListener('timeupdate', () => {})
      elevideo.addEventListener('play', () => {})
      elevideo.addEventListener('playing', () => {
        // 播放中
        console.log('播放中')
      })
      elevideo.addEventListener('waiting', () => {
        // 加载
        console.log('加载中')
      })
      elevideo.addEventListener('pause', () => {
        console.log('暂停')
      })
      elevideo.addEventListener(
        'ended',
        () => {
          console.log('播放结束')
        },
        false
      )
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  background-color: transparent !important;
}
::v-deep .el-collapse-item__wrap {
  background-color: transparent !important;
}
::v-deep .el-collapse-item__header {
  border: none !important;
}
::v-deep .el-collapse {
  border: none !important;
}
::v-deep .el-collapse-item__wrap {
  border: none !important;
}
.video_box {
  padding: 24px;
  .video {
    border-radius: 8px;
  }
}
.input_pj {
  display: flex;
  align-items: center;
}
.box_bottom {
  padding: 20px;
  width: 100%;

  background-color: #fff;
  border-radius: 10px;
  .title {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .pl_box {
    border-bottom: 1px solid #f2f3f5;
    display: flex;
    padding: 10px 10px;
    .pl_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time {
        margin: 10px 0px;
      }
      .icon {
        margin: 10px 0px;
      }
    }
  }
}
.video {
  width: 1080px !important;
  height: 540px !important;
  // max-height: calc(100% - 40px) !important;
  object-fit: contain !important;
}
.content_box {
  // background-color: #fff;
  .video_mulu {
    width: 30%;
    padding: 24px;
  }
  .box_top {
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
  }
}
</style>
